<template>
  <div id="unpassList">
    <el-row style="display:flex;align-items:center;margin-left:20px">
      <i class="fa fa-reply" style="font-size:24px;z-index:100;cursor:pointer" @click="cancel"></i>
      <h1 class="con-right-title" style="margin-left:-20px">未通过内容列表</h1>
    </el-row>
    

    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="作业帖子" name="homework">
        <homework />
      </el-tab-pane>

      <el-tab-pane label="作品帖子" name="works">
        <works />
      </el-tab-pane>

      <el-tab-pane label="动态帖子" name="dynamic">
        <dynamic />
      </el-tab-pane>

      <el-tab-pane label="活动帖子" name="activity">
        <activity />
      </el-tab-pane>

      <el-tab-pane label="评论" name="comment">
        <comment />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import homework from '@component/commentCheck/bannedUsers/modules/homework'
import works from '@component/commentCheck/bannedUsers/modules/works'
import dynamic from '@component/commentCheck/bannedUsers/modules/dynamic'
import activity from '@component/commentCheck/bannedUsers/modules/activity'
import comment from '@component/commentCheck/bannedUsers/modules/comment'

export default {
  msg: '未通过内容列表',

  components: {
    homework,
    works,
    dynamic,
    activity,
    comment
  },

  data() {
    return {
      activeName: 'homework'
    }
  },
  methods: {
    cancel(){
      this.$router.go(-1)
    },
    handleClick(val) {
      this.activeName = val.name
    }
  }
}
</script>

<style lang="less">
#unpassList {
  .el-row {
    padding-top: 15px;
  }

  .el-tab-pane {
    padding-top: 15px;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    margin-left: 30px !important;
  }

  .el-tabs {
    margin: 0 20px 0 20px !important;
  }

  .el-tabs__item.is-active {
    height: 41px;
    color: #0d1636 !important;
    border-top: 2px solid #1dc8a4;
  }

  .el-tabs__item:hover {
    color: #1dc8a4 !important;
  }
}
</style>
